.. |Cross_ic2| image:: Img/Cross_ic2.png
.. |Enter_ic| image:: Img/Enter_ic.png


####################################
Руководство по управлению иконками
####################################

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Назначение и общий функционал управления иконками
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

**Иконка** - это элемент графического интерфейса, пиктограмма, обозначающая компонент, инструмент, действие в Системе и т.п.

В Системе иконки хранятся в виде svg-файлов (svg - формат масштабируемой векторной графики). 

В функции Администратора Системы входит создание, загрузка, изменение и удаление иконок, а также выгрузка иконок из Системы.

Редактор иконок открывается по кнопке «Иконки» пункта «Администрирование» в сайдбаре Системы (:numref:`5Pic1`).

.. _5Pic1:          
.. figure:: Img/Icon_sidebar.png
       :scale: 80 %
       :align: center

       *Кнопка «Иконки»*

.. note:: Название пунктов меню сайдбара и расположение этих пунктов требуется уточнить в документации на Систему, так как они могут отличаться в зависимости от настроек Системы.

Редактор иконок также открывается из интернет-браузера по адресу: <IP-адрес серверной части Системы>/admin/svg.

После нажатия на кнопку «Иконки» либо после перехода по адресу, указанному выше, в рабочей области Системы отобразится Редактор иконок, содержащий панель настроек, строку поиска иконок и список существующих в Системе иконок (:numref:`5Pic2`).

.. _5Pic2:          
.. figure:: Img/Icons.png
       :scale: 80 %
       :align: center

       *Редактор иконок*

При выборе иконки из списка в Редакторе иконок появится изображение выбранной иконки и поле с текстом svg-файла этой иконки (:numref:`5Pic3`).

.. _5Pic3:          
.. figure:: Img/Icon_list.png
       :scale: 80 %
       :align: center

       *Иконка в Редакторе иконок*

По кнопке «Очистить» на панели настроек Редактор иконок очищается (:numref:`5Pic3`).

~~~~~~~~~~~~~~~~~~~~~~
Поиск в списке иконок 
~~~~~~~~~~~~~~~~~~~~~~
 
В списке иконок предусмотрена возможность поиска иконки по ее наименованию (:numref:`5Pic2`).

Поиск в списке иконок выполняется вводом необходимого текста в текстовое поле над списком (:numref:`5Pic2`).

При вводе в это поле определенной комбинации знаков в списке остаются только те иконки, 
в наименовании которых присутствует введенная комбинация знаков (:numref:`5Pic4`). 

.. _5Pic4:
.. figure:: Img/Search_icon.png
       :scale: 80 %
       :align: center

       *Пример поиска в списке иконок*

Строка поиска очищается по кнопке |Cross_ic2| (:numref:`5Pic4`).       

.. _Создание иконки:

~~~~~~~~~~~~~~~~
Создание иконки
~~~~~~~~~~~~~~~~

Для создания иконки нужно нажать кнопку «Создать» на панели настроек (:numref:`5Pic2`).
После нажатия на эту кнопку откроется форма для ввода имени иконки, в которой необходимо ввести имя иконки и нажать кнопку |Enter_ic| или Enter (:numref:`5Pic5`). 

.. _5Pic5:          
.. figure:: Img/New_icon.png
       :scale: 80 %
       :align: center

       *Форма для ввода имени иконки*

.. note:: Выйти без сохранения из формы ввода имени иконки можно по кнопке Esc.

После этого в Редакторе иконок появится поле с пустой структурой svg-файла новой иконки (:numref:`5Pic6`). Его необходимо редактировать вручную.

.. _5Pic6:          
.. figure:: Img/New_icon1.png
       :scale: 80 %
       :align: center

       *Новая иконка в Редакторе иконок*

""""""""""""""""""
Сохранение иконки
""""""""""""""""""

Сохранение иконки выполняется по кнопке «Сохранить» на панели настроек (:numref:`5Pic6`).

После сохранения иконка появится в списке иконок Системы (:numref:`5Pic7`).

.. _5Pic7:          
.. figure:: Img/New_icon2.png
       :scale: 80 %
       :align: center

       *Новая иконка в списке иконок*

~~~~~~~~~~~~~~~~~~~~~~~~~
Загрузка иконки из файла
~~~~~~~~~~~~~~~~~~~~~~~~~      

В Системе предусмотрена загрузка готового svg-файла с иконкой.
Загрузка выполняется по кнопке «Выберите файл» на панели настроек (:numref:`5Pic2`). 
После нажатия на эту кнопку откроется Проводник, в котором необходимо выбрать загружаемый svg-файл иконки. 

После этого пиктограмма иконки и текст svg-файла появятся в Редакторе иконок (:numref:`5Pic8`).

.. _5Pic8:          
.. figure:: Img/Download_icon.png
       :scale: 80 %
       :align: center

       *Загруженная иконка в Редакторе иконок*

В поле с текстом svg-файла можно внести необходимые изменения. Для сохранения загруженной иконки нужно нажать кнопку «Сохранить»
на панели настроек (:numref:`5Pic8`). После сохранения иконка появится в списке иконок Системы. 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Загрузка списка иконок из архивного файла
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

В Системе есть возможность загрузки списка svg-файлов с готовыми иконками из архивного zip-файла. 
Загрузка выполняется по кнопке «Выберите ZIP файл» на панели настроек (:numref:`5Pic2`). 
После нажатия на эту кнопку откроется Проводник, в котором необходимо выбрать загружаемый zip-файл со списком svg-файлов иконок. 

После этого название выбранного zip-файла появится в Редакторе иконок (:numref:`5Pic9`).

.. _5Pic9:          
.. figure:: Img/Download_arh.png
       :scale: 80 %
       :align: center

       *Выбранный zip-файл в Редакторе иконок*

.. note:: Все svg-файлы из выбранного zip-файла будут загружены в Систему.        

Для сохранения списка svg-файлов иконок из выбранного zip-файла необходимо нажать кнопку «Сохранить» в Редакторе иконок (:numref:`5Pic9`). 
После сохранения все svg-файлы иконок из выбранного zip-файла появятся в списке иконок Системы (:numref:`5Pic10`). 

.. _5Pic10:          
.. figure:: Img/Download_arh1.png
       :scale: 80 %
       :align: center

       *Список загруженных svg-файлов иконок из zip-файла*

Названия иконок в Системе (в т.ч. и в списке Редактора иконок) соответствуют названиям svg-файлов иконок в выбранном zip-файле (:numref:`5Pic10`). 

~~~~~~~~~~~~~~~~~~~~~~
Редактирование иконки
~~~~~~~~~~~~~~~~~~~~~~

Редактирование выбранной иконки выполняется в поле с текстом svg-файла в Редакторе иконок (:numref:`5Pic8`). 

При редактировании svg-кода иконки необходимо обратить внимание на следующие теги файла:

*`fill`* 
        Заливка графических элементов цветом. Если этот параметр установлен, то нельзя будет использовать пользовательские цвета при использовании иконки 
        в Системе.
*`width` и `height`* 
        Ширина и высота иконки соответственно. Если эти параметры установлены, то могут возникнуть проблемы при изменении размера иконки в 
        Системе.

Для сохранения изменений необходимо нажать кнопку «Сохранить» на панели настроек (:numref:`5Pic8`).

~~~~~~~~~~~~~~~~
Удаление иконки
~~~~~~~~~~~~~~~~

Удаление выбранной иконки выполняется по кнопке «Удалить»  на панели настроек (:numref:`5Pic2`).
После нажатия на эту кнопку иконка будет удалена из списка иконок.

~~~~~~~~~~~~~~~~
Выгрузка иконок
~~~~~~~~~~~~~~~~

В Системе предусмотрен функционал выгрузки иконок, загруженных в Систему, на ПК Администратора. Выгрузка иконок выполняется по кнопке "Выгрузить" на панели настроек (:numref:`5Pic2`).
После нажатия на эту кнопку откроется форма "Выгрузка архивом" со списком иконок, загруженных в Систему (:numref:`5Pic11`).

.. _5Pic11:          
.. figure:: Img/Export.png
       :scale: 80 %
       :align: center

       *Форма "Выгрузка архивом"*

Для удобства можно воспользоваться полем поиска по списку иконок. В этом случае в в списке иконок останутся только те иконки, которые содержат текст, введенный
в поле поиска (:numref:`5Pic12`).

.. _5Pic12:          
.. figure:: Img/Export1.png
       :scale: 80 %
       :align: center

       *Пример поиска в форме "Выгрузка архивом"*

В форме "Выгрузка архивом" необходимо включить флаг слева от тех иконок, которые требуется выгрузить, и нажать кнопку "Подтвердить" (:numref:`5Pic11`).  
После этого на ПК Администратора будет экспортирован архивный zip-файл, содержащий все выбранные иконки в виде svg-файлов.